<template>
<div>
  <el-button type="primary" icon="el-icon-circle-plus"  @click="addbtn()">添加</el-button>
  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="label"
      label="菜单名称"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="parentName"
      label="父节点"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="url"
      label="链接地址">
    </el-table-column>
    <el-table-column
      prop="icon"
      label="图标">
    </el-table-column>
     <el-table-column label="操作" width="270">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
     </el-table-column>
  </el-table>
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
     <el-dialog
      width="45%"
      title="父节点"
      :visible.sync="innerVisible"
      append-to-body>
      <el-tree :data="tableData" :props="defaultProps"
                     show-checkbox
                     ref="parentMenuTree"
                     default-expand-all
                    ></el-tree>
              <div slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="checkSelectNode">确 定</el-button>
                </div>
    </el-dialog>
                <el-form ref="form" :model="form" label-width="80px">
                        <el-input v-model="form.parentId" type="hidden"></el-input>
                        <el-form-item label="菜单名称">
                            <el-input v-model="form.label"></el-input>
                        </el-form-item>
                        <el-form-item label="父节点">
                            <el-input v-model="form.parentName"  @focus="innerVisible=true"></el-input>
                        </el-form-item>
                        <el-form-item label="链接地址">
                            <el-input v-model="form.url"></el-input>
                        </el-form-item>
                        <el-form-item label="图标">
                            <el-input v-model="form.icon"></el-input>
                        </el-form-item>
                        <el-form-item label="是否有效">
                            <el-switch v-model="form.visible"></el-switch>
                        </el-form-item>
                  </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                </div>
            </el-dialog>
             
</div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [],
        dialogFormVisible:false,
        form:[],
        title:'',
        innerVisible: false,
        seen:false,
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },created:function(){
        this.loadTreeData();
            },
    methods: {
      loadTreeData(){
            //初始化数据
           this.$http.get("api/cs/menu/queryNodes").then((response) => {
                console.log(response.data.data)
                 this.tableData=response.data.data;
                 
              })
        },
        //处理编辑（弹出部门更新对话框）
        handleEdit(index, row) {
            console.log(index, row);
            this.form=row;
            // console.log(row)
            if(this.form.visible==0){
              this.form.visible=true
            }else{
              this.form.visible=false
            }
            //更新显示名称
            this.title="菜单更新";
            //对话框显示
            this.dialogFormVisible=true;
            this.seen=true;
        },addbtn(){
        this.form={};
        this.dialogFormVisible=true;
        this.seen=false
         this.title="添加";
        },
        onSubmit() {
                    //添加或者更新获取
                    //判断visible是否为true
                    if(this.form.visible){
                        this.form.visible=0;
                    }else{
                        this.form.visible=1;
                    }  
                    var _this=this; 
                    if(this.seen){//更新
                      _this =this;
                     this.$http.put("api/cs/menu/update",this.form).then(function (response) {
                        console.log(response);
                        if(response.status == 200 && response.data.code==2000){
                            //提示成功
                            _this.$message({
                                message: '恭喜你，操作成功',
                                type: 'success'
                            });
                            //_this.$message.success("恭喜你，添加成功");
                            //重新加载数据
                            _this.loadTreeData();
                        }
                    }).catch(function (error) {
                        console.log(error);
                        _this.$message.error("你错了。。。");
                    });
                    //    url="http://localhost:12130/api/cs/menu/update";
                    }else{//添加
                      _this =this;
                         this.$http.post("api/cs/menu/insert",this.form).then(function (response) {
                        console.log(response);
                        if(response.status == 200 &&response.data.code==2000){
                            //提示成功
                            _this.$message({
                                message: '恭喜你，操作成功',
                                type: 'success'
                            });
                            //_this.$message.success("恭喜你，添加成功");
                            //重新加载数据
                            _this.loadTreeData();
                        }
                    })// 发送 POST 请求
                    .catch(function (error) {
                        console.log(error);
                        _this.$message.error("你错了。。。");
                    });
                    }
                    this.dialogFormVisible=false
                },
                //删除  不能直接写delete
               handleDelete(id,row){
                //  alert(JSON.stringify(row))
                     if(row.children!=null&&row.children.length>0){
                      this.$message.error("该节点下有子节点，不能删除。。。");
                      return; //让程序不继续
                    }
                 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                         }).then(() => {
                             var _this=this;
                          this.$http.delete('api/cs/menu/deleteById?menuId='+row.id).then(function (response) {
                            console.log(response);
                            if(response.status == 200&&response.data.code==2000){
                                    //提示成功
                                   _this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    _this.loadTreeData();
                                    }}
                        ).catch(function (error) {
                            console.log(error);
                            _this.$message.error("你错了。。。") 
          })   
                        }).catch(() => {
                            this.$message({
                             type: 'info',
                             message: '已取消删除'
                         });          
                     });
                 },
                //校验选中节点数量
                checkSelectNode(){
                   let nodes = this.$refs.parentMenuTree.getCheckedNodes();
                   if(nodes.length>1){
                       this.$message.error("只能选择一个节点。。。");
                       return;
                   }
                    console.log("一个节点："+JSON.stringify(nodes)+"名称为："+nodes[0].label);
                    this.form.parentName=nodes[0].label;
                    this.form.parentId=nodes[0].id;
                    //关闭弹框
                    this.innerVisible=false;
                    console.log("选中节点："+JSON.stringify(this.form));
                }
    },
  }
</script>